<template>
    <div class="si">
        <div class="si_txt">
            <p>
                {{ha}}
                <a href="###" v-for="(value,index) in hb" :key="index" v-show="active === index">
                    {{value}}
                </a>
            </p>
            <div class="mttxt">
                <ul class="mleft">
                    <li class="mh">
                        视频中心
                    </li>
                    <li v-on:click="active = index" :class="[{active: active === index}]" v-for="(value,index) in hb" :key="index"><a href="###" v-text="value"></a><img :src="you" class="you"></li>
                </ul>
                <div class="righta" v-show="active === 0">
                    <h2>{{hc}}</h2>
                    <div class="ra_txt">
                        <div v-for="({src,a,b,srb,c,d},index) in hd" :key="index">
                            <img :src="src">
                            <h6>{{a}}</h6>
                            <p class="r_a">{{b}}</p>
                            <p class="r_b">
                                <span class="r_span">
                                    <img :src="srb">
                                    <span>
                                        {{c}}
                                    </span>
                                </span>
                                <span class="r_c">{{d}}</span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="rightb" v-show="active === 1">
                    <div class="rb_top">
                        <div class="rtl">
                            <a href="###">
                                <img :src="rb" class='bo'>
                            </a>
                        </div>
                        <div class="rtr">
                            <div class="rt_top">
                                <p>{{rtop.a}}</p>
                                <a href="###">{{rtop.b}}</a>
                            </div>
                            <div class="rt_bto">
                                <h6>{{rtop.c}}</h6>
                                <span>{{rtop.d}}</span>
                                <p class="vip">
                                    <i>{{rtop.e}}</i>
                                    <img :src="rc">
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="rb_bto">
                        <div class="rbig">
                            <img :src="rtop.rbig">
                        </div>
                        <div class="rsmall">
                            <h6>{{rtop.ta}}</h6>
                            <img :src="rtop.rsa">
                            <span>{{rtop.tb}}</span>
                            <p>{{rtop.tc}}</p>
                        </div>
                    </div>
                </div>
                <div class="rightc" v-show="active === 2">
                    <h2>{{rbto.a}}</h2>
                    <p class="rall">
                        <a href="###" class="ralred">{{rbto.qb}}</a>
                        <span class="ralspan">
                            <a href="###" v-for="(value,index) in rbto.ulList" :key="index">{{value}}</a>
                        </span>
                    </p>
                    <div class="raltxt">
                        <ul>
                            <li v-for="(item,index) in rbto.zhList" :key="index">
                                <img :src="item.img">
                                <h4>{{item.diyi}}</h4>
                                <span>{{item.dier}}</span>
                                <p>
                                    {{item.disan}}
                                </p>
                                <i>{{item.disi}}</i>
                            </li>
                            <li style="height:0;border:0;"></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import sia from '@/assets/11-27jz5158/sia.png';
import sib from '@/assets/11-27jz5158/sib.png';
import sic from '@/assets/11-27jz5158/sic.png';
import sid from '@/assets/11-27jz5158/sid.png';
import sie from '@/assets/11-27jz5158/sie.png';
import sif from '@/assets/11-27jz5158/sif.png';
import you from '@/assets/11-27jz5158/you.png';
import rb_b from '@/assets/11-27jz5158/rb_b.png';
import rb_c from '@/assets/11-27jz5158/rb_c.png';
import rbig from '@/assets/11-27jz5158/rbig.jpg';
import rsmall from '@/assets/11-27jz5158/rsmall.png';
export default {
    data(){
        return {
            ha:'视频中心 > ',
            hb:['直播回顾','在线直播','功能视频'],
            you:you,
            active:0,
            hc:'直播回顾',
            hd:[
                {src:sia,a:'郭老师系列课',b:'软件功能',srb:sib,c:'郭老师',d:'直播回顾'},
                {src:sic,a:'胡老师系列课',b:'软件功能',srb:sid,c:'胡老师',d:'直播回顾'},
                {src:sie,a:'客服部系列课',b:'软件功能',srb:sif,c:'客服部',d:'直播回顾'},
            ],
            rb:rb_b,
            rc:rb_c,
            rtop:{
                a:'直播开始了！',
                b:'免费报名',
                c:'胡老师系列课',
                d:'开播时间：2020-03-04 19:30:34',
                e:'难度等级：中等难度',
                rbig:rbig,
                rsa:rsmall,
                ta:'授课老师',
                tb:'胡老师',
                tc:'首席讲师，策略建模师，金融硕士，CFA LEVEL-2 CANDIDATE ',
            },
            rbto:{
                a:'功能视频',
                qb: "全部",
                ulList: [        
                "破位交易",
                "拐点卖出",
                "拐点买入",
                "区间交易",
                "动态止盈",
                "预警交易",
                "均线交易",
                "机智资金流一号（上）",
                "机智资金流一号（下）",
                "机智资金流二号",
                "机智资金流三号（上）",
                "机智资金流三号（下）",
                "机制资金流四号",
                "机智资金流五号",
              ],
              zhList: [        
                {
                  img: require("@/assets/11-27jz5158/wa.png"),
                  diyi: "破位交易功能讲解",
                  dier: "软件功能",
                  disan: "2019-11-12 17:17:45   13分钟 ",
                  disi: "免费",
                },
                {
                  img: require("@/assets/11-27jz5158/wb.png"),
                  diyi: "拐点卖出功能讲解",
                  dier: "软件功能",
                  disan: "2019-11-12 17:17:52   19分钟 ",
                  disi: "免费",
                },
                {
                  img: require("@/assets/11-27jz5158/wc.png"),
                  diyi: "拐点买入功能讲解",
                  dier: "软件功能",
                  disan: "2019-11-12 17:17:55   11分钟 ",
                  disi: "免费",
                },
                {
                  img: require("@/assets/11-27jz5158/wd.png"),
                  diyi: "区间交易功能讲解",
                  dier: "软件功能",
                  disan: "2019-11-12 18:25:45   40分钟 ",
                  disi: "免费",
                },
                {
                  img: require("@/assets/11-27jz5158/we.png"),
                  diyi: "动态止盈功能讲解",
                  dier: "软件功能",
                  disan: "2019-11-12 18:28:42   15分钟 ",
                  disi: "免费",
                },
                {
                  img: require("@/assets/11-27jz5158/wf.png"),
                  diyi: "预警交易功能讲解",
                  dier: "软件功能",
                  disan: "2019-11-12 18:30:08   18分钟 ",
                  disi: "免费",
                },
                {
                  img: require("@/assets/11-27jz5158/wg.png"),
                  diyi: "均线交易功能讲解",
                  dier: "软件功能",
                  disan: "2019-11-12 18:30:05   22分钟 ",
                  disi: "免费",
                },
                {
                  img: require("@/assets/11-27jz5158/wh.jpg"),
                  diyi: "机智资金流一号（上）",
                  dier: "软件功能",
                  disan: "2020-05-26 14:21:23   0分钟 ",
                  disi: "免费",
                },
                {
                  img: require("@/assets/11-27jz5158/wi.jpg"),
                  diyi: "机智资金流一号（下）",
                  dier: "软件功能",
                  disan: "2020-05-26 14:21:21   2分钟 ",
                  disi: "免费",
                },
                {
                  img: require("@/assets/11-27jz5158/wj.jpg"),
                  diyi: "机智资金流二号",
                  dier: "软件功能",
                  disan: "2020-05-26 14:21:17   2分钟 ",
                  disi: "免费",
                },
                {
                  img: require("@/assets/11-27jz5158/wk.jpg"),
                  diyi: "机智资金流三号（上）",
                  dier: "软件功能",
                  disan: "2020-05-26 14:21:13   5分钟 ",
                  disi: "免费",
                },
                {
                  img: require("@/assets/11-27jz5158/wl.jpg"),
                  diyi: "机智资金流三号（下）",
                  dier: "软件功能",
                  disan: "2020-05-26 14:21:10   4分钟 ",
                  disi: "免费",
                },
                {
                  img: require("@/assets/11-27jz5158/wm.jpg"),
                  diyi: "机制资金流四号",
                  dier: "软件功能",
                  disan: "2020-05-26 14:21:07   2分钟 ",
                  disi: "免费",
                },
                {
                  img: require("@/assets/11-27jz5158/wn.jpg"),
                  diyi: "机智资金流五号",
                  dier: "软件功能",
                  disan: "2020-05-26 14:21:04   7分钟 ",
                  disi: "免费",
                },
              ],
            },
       }
    }
}
</script>

            }
        }
    }
}
</script>
<style lang="scss">
*{margin: 0;padding: 0;}
ul,ol,dl{list-style: none;}
a{text-decoration: none;}
.si{
    width: 100%;
    background: #f2f2f2;
    .si_txt{
        width: 70%;
        height: 100%;
        margin: 0 auto;
        box-sizing: border-box;
        padding: 50px 0 120px;
        &>p{
            width: 100%;
            height: 30px;
            line-height: 30px;
            margin-bottom: 10px;
            font-size: 16px;
            color: #333333;
            a{
                color: #333333;
            }
        }
        .mttxt{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-between;
            ul.mleft{
                width: 17%;
                height: 216px;
                background: #ffffff;
                float: left;
                margin-top: 10px;
                li{
                    padding: 5px 0 5px 15px;
                    border-bottom: 1px solid #dadade;
                    line-height: 40px;
                    .you{
                        float: right;
                        margin-top: 14px;
                        margin-right: 20%;
                        display: none;
                    }
                    a{
                        font-size: 16px;
                        color: #000000;
                    }
                }
                li.mh{
                    padding: 20px 0 20px 15px;
                    color: #333333;
                    font-size: 20px;
                    font-weight: 600;
                    line-height: 22px;
                }
                li.active{
                    img{
                        display: block;
                    }
                    a{
                        color: #e4393c;
                    }
                }
            }
            .righta{
                width: 78%;
                margin-top: 10px;
                background: #ffffff;
                overflow: hidden;
                height: 405px;
                box-sizing: border-box;
                padding: 0 40px;
                h2{
                    width: 100%;
                    height: 50px;
                    line-height: 50px;
                    margin: 20px 0 40px;
                    font-size: 30px;
                    color: #333333;
                    font-weight: 500;
                }
                .ra_txt{
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    div{
                        width: 31%;
                        height: 255px;
                        border: 1px solid #cccccc;
                        img{
                            display: block;
                            width: 100%;
                            height: 121px;
                        }
                        h6{
                            width: 96%;
                            margin: 16px auto 10px;
                            height: 16px;
                            font-size: 15px;
                            color: #333333;
                        }
                        p.r_a{
                            width: 96%;
                            margin: 0 auto;
                            height: 25px;
                            line-height: 25px;
                            font-size: 15px;
                            color: #999999;
                            border-bottom: 1px solid #cccccc;
                        }
                        p.r_b{
                            width: 96%;
                            margin: 10px auto;
                            height: 28px;
                            margin-top: 10px;
                            line-height: 28px;
                            display: flex;
                            justify-content: space-around;
                            span.r_span{
                                display: flex;
                                img{
                                    display: inline-block;
                                    width: 28px;
                                    height: 28px;
                                    margin-right: 10px;
                                }
                                span{
                                    display: inline-block;
                                    color: #333333;
                                    font-size: 14px;
                                }
                            }
                            .r_c{
                                color: #ff0000;
                                font-size: 14px;
                            }
                        }
                    }
                }

            }
            .rightb{
                width: 78%;
                margin-top: 10px;
                overflow: hidden;
                .rb_top{
                    width: 100%;
                    height: 350px;
                    background: #363739;
                    display: flex;
                    justify-content: space-between;
                    .rtl{
                        width: 68%;
                        height: 100%;
                        background: url('../../assets/11-27jz5158/rb_a.png')no-repeat;
                        background-size: 100% 100%;
                        a{
                            display: block;
                            width: 100%;
                            height: 100%;
                            position: relative;
                            img{
                                display: block;
                                width: 56px;
                                height: 56px;
                                position: absolute;
                                top: 43%;
                                left: 43%;
                            }
                        }
                    }
                    .rtr{
                        width: 30%;
                        height: 100%;
                        overflow: hidden;
                        div{
                            width: 100%;
                            height: 165px;
                            background: #4a4a4f;
                            overflow: hidden;
                        }
                        div.rt_top{
                            margin-top: 10px;
                            text-align: center;
                            p{
                                width: 100%;
                                height: 19px;
                                line-height: 19px;
                                font-size: 18px;
                                color: #ff0000;
                                margin: 30px auto 20px;
                            }
                            a{
                                display: block;
                                width: 80%;
                                height: 40px;
                                line-height: 40px;
                                color: #ffffff;
                                font-size: 14px;
                                background: #ff0000;
                                margin: 0 auto; 
                            }
                        }
                        div.rt_bto{
                            margin-top: 20px;
                            box-sizing: border-box;
                            padding: 0 8%;
                            color: #ffffff;
                            h6{
                                width: 100%;
                                height: 25px;
                                line-height: 25px;
                                font-weight: normal;
                                font-size: 15px;
                                margin-top: 14px;
                            }
                            span{
                                display: block;
                                width: 100%;
                                height: 18px;
                                line-height: 18px;
                                font-size: 12px;
                                margin: 30px 0 10px;
                            }
                            p.vip{
                                width: 100%;
                                height: 18px;
                                line-height: 18px;
                                font-size: 12px;
                                color: #ffffff;
                                display: flex;
                                justify-content: space-between;
                                i{
                                    display: block;
                                    font-style: normal;
                                }
                                img{
                                    display: block;
                                }
                            }
                        }
                    }
                }
                .rb_bto{
                    width: 100%;
                    margin-top: 30px;
                    display: flex;
                    justify-content: space-between;
                    div.rbig{
                        width: 68%;
                        img{
                            display: block;
                            width: 100%;
                            height: 1780px;
                        }
                    }
                    .rsmall{
                        width: 30%;
                        height: 271px;
                        background: #ffffff;
                        color:#333333;
                        h6{
                            width: 100%;
                            height: 30px;
                            line-height: 30px;
                            font-size: 18px;
                            box-sizing: border-box;
                            padding-left: 10%;
                            border-left: 2px solid #ff0000;
                            margin: 10px 0;
                        }
                        img{
                            display: block;
                            width: 108px;
                            height: 108px;
                            margin: 0 auto;
                        }
                        span{
                            display: block;
                            height: 13px;
                            line-height: 13px;
                            font-size: 12px;
                            margin: 10px 0;
                            text-align: center;
                        }
                        p{
                            width: 100%;
                            height: 60px;
                            line-height: 20px;
                            box-sizing: border-box;
                            padding: 0 10%;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 3;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            font-size: 14px;
                            text-align: center;
                        }
                    }
                }
            }
            .rightc{
                width: 78%;
                margin-top: 10px;
                background: #ffffff;
                overflow: hidden;
                box-sizing: border-box;
                padding: 0 40px;
                h2{
                    width: 100%;
                    height: 50px;
                    line-height: 50px;
                    margin: 20px 0 40px;
                    font-size: 30px;
                    color: #333333;
                    font-weight: 500;
                }
                p.rall{
                    width: 100%;
                    height: 110px;
                    margin-bottom: 15px;
                    display: flex;
                    .ralred{
                        display: block;
                        width: 10%;
                        height: 100%;
                        font-size: 18px;
                        font-weight: 600;
                        color: #ff0000;
                    }
                    .ralspan{
                        display: block;
                        width: 80%;
                        height: 100%;
                        display: flex;
                        flex-wrap: wrap;
                        a{
                            display: block;
                            height: 25px;
                            line-height: 25px;
                            margin-left: 2%;
                            font-size: 18px;
                            color: #000000;
                            font-weight: lighter;
                        }
                    }
                }
                .raltxt{
                    width: 100%;
                    ul{
                        width: 100%;
                        display: flex;
                        justify-content: space-between;
                        flex-wrap: wrap;
                        li{
                            width: 30%;
                            height: 236px;
                            margin-bottom: 20px;
                            border: 1px solid #cccccc;
                            img{
                                display: block;
                                width: 100%;
                                height: 116px;
                            }
                            h4{
                                width: 90%;
                                margin: 10px auto;
                                height: 19px;
                                line-height: 19px;
                                display: -webkit-box;
                                -webkit-box-orient: vertical;
                                -webkit-line-clamp: 1;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                font-size: 18px;
                                color: #333333;
                                font-weight: normal;
                            }
                            span{
                                display: block;
                                width: 90%;
                                height: 16px;
                                line-height: 16px;
                                margin: 0 auto;
                                font-size: 14px;
                                color: #333333;
                            }
                            p{
                                width: 90%;
                                height: 30px;
                                line-height: 30px;
                                font-size: 14px;
                                margin: 0 auto;
                                color: #333333;
                                display: -webkit-box;
                                -webkit-box-orient: vertical;
                                -webkit-line-clamp: 1;
                                overflow: hidden;
                                text-overflow: ellipsis;
                            }
                            i{
                                display: block;
                                width: 90%;
                                height: 30px;
                                font-style: normal;
                                font-size: 14px;
                                color: #ff0000;
                                text-align: right;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>